<template>
  <TableView class="table">
    <template #form>
      <NSpace justify="end" align="center">
        功能名称:
        <NInput placeholder="输入功能名称" v-model:value="functionName" clearable />
        <NButton ghost type="primary" style="width: 80rem" @click="getFunctionCodeList">
          查询
        </NButton>
      </NSpace>
    </template>
    <template #table>
      <div style="width: 100%; height: 100%; background-color: #f0f0ee">
        <NSpin :show="spinShow">
          <div class="main">
            <div class="item-content" v-for="(item, index) in functionCodeList" :key="index" @click="goAdd(item.value)">
              {{ item.name }}
            </div>
          </div>
        </NSpin>
      </div>
    </template>
  </TableView>
</template>
<script setup lang="ts">
import { NSpace, NInput, NButton, NSpin } from 'naive-ui'
import { ref, watch, onDeactivated } from 'vue'
import { useRoute } from 'vue-router'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import TableView from '@/components/TableView.vue'
import router from '@/router'

const route = useRoute()
const functionName = ref()

// 获取功能名称
const spinShow = ref(false)
const functionCodeList = ref()
const getFunctionCodeList = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'workBench',
    api: 'workFlowFunctionList',
    override: {
      params: {
        functionName: functionName.value
      }
    }
  })
  spinShow.value = false
  if (error) return
  if (res.code !== 0) return
  functionCodeList.value = res.data
}
// 去新增
const goAdd = (path: any) => {
  router.push({ path })
}

const keyUpDown = (e: any) => e.key == 'Enter' && (getFunctionCodeList())
onDeactivated(() => window.removeEventListener('keyup', keyUpDown, false))

watch(
  () => route.path,
  () => {
    if (route.path == '/OA/Workbench/ProgressStart') {
      getFunctionCodeList()
      window.addEventListener('keyup', keyUpDown, false)  // 回车
    }
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
.table {
  padding: 29rem 30rem 42rem;
}

.main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  background-color: #f0f0ee;
  padding: 25rem 20rem 20rem 5rem;

  .item-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 15%;
    height: 50rem;
    background-color: #d3e7d2;
    border-radius: 5rem;
    margin-bottom: 15rem;
    margin-left: 25rem;
    cursor: pointer;
  }
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
